import Vue from 'vue'
import VueRouter from 'vue-router'
// import shouye from '../views/shouye.vue'

Vue.use(VueRouter)

const routes = [{
        path: '/tabber',
        name: 'tabber',
        component: () =>
            import ('../views/tabber.vue'),
        children: [{ //二级路由多个
                path: '/tabber/shouye',
                name: 'shouye',
                meta: { title: '首页' },
                component: () =>
                    import ('../views/shouye.vue'),

            },
            {
                path: '/tabber/baobaotuan',
                name: 'baobaotuan',
                meta: { title: '爆爆团' },
                component: () =>
                    import ('../views/baobaotuan.vue')
            },
            {
                path: '/tabber/dindang',
                name: 'dindang',
                meta: { title: '订单' },
                component: () =>
                    import ('../views/dindang.vue')
            },
            {
                path: '/tabber/wode',
                name: 'wode',
                meta: { title: '我的' },
                component: () =>
                    import ('../views/wode.vue')
            },
            {
                path: '*',
                component: () =>
                    import ('../views/404.vue')
            },
        ]
    },

    {
        path: '/register',
        name: 'register',
        meta: { title: '注册' },
        component: () =>
            import ('../views/register.vue')
    },
    {
        path: '/login',
        name: 'login',
        meta: { title: '登录' },
        component: () =>
            import ('../views/login.vue')
    },
    {
        path: '/xianqingye/:id', //:id为占位以后可传参
        name: 'xianqingye',
        meta: { title: "详情页" },
        component: () =>
            import ('../views/xianqingye.vue'),
        children: [{

            path: '/xianqingye/:id/shopcar',
            name: 'shopcar',
            meta: { title: '购物车' },
            component: () =>
                import ('../views/shopcar')

        }, ]
    },
    {
        path: '/sousuo',
        name: 'sousuo',
        meta: { title: '搜索页' },
        component: () =>
            import ('../views/index/sousuo.vue')

    },
    {
        path: '/dizhi',
        name: 'dizhi',
        meta: { title: '我的收货地址' },
        component: () =>
            import ('../views/index/dizhi.vue')

    },
    {
        path: '/zengdizhi',
        name: 'zengdizhi',
        meta: { title: '新增地址' },
        component: () =>
            import ('../views/index/zengdizhi.vue')
    },
    {
        path: '/mycollect',
        name: 'mycollect',
        meta: { title: '我的关注' },
        component: () =>
            import ('../views/index/mycollect')
    },

    // 404网址错误跳转
    {
        path: '*',
        component: () =>
            import ('../views/404.vue')
    },


    // 默认首次加载就加载的页面组件
    {
        path: '/',
        redirect: '/tabber/shouye',
        meta: { title: '首页' },
    }
]

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})

// 定义路由全局守卫前置方法
router.beforeEach((to, from, next) => {
    //参数一: to 新的路由对象
    //参数二: from 旧的路由对象
    //参数三: next 路由控制方法, 调用该方法则允许路由跳转, 未调用该方法则不允许路由跳转
    //next方法必须调用不然就发不了请求

    // 动态更新网页标题
    document.title = to.meta.title;


    // 获取localStorage中的登录凭证
    var token = localStorage.getItem('token');


    // 将请求的网页标题改为切换后的组件名称
    document.title = to.meta.title;
    if (to.path == '/wode' || to.path == '/dindang') {
        if (token) {
            next();
        } else {
            next('/login')
        }
    } else {
        next();
    }
})

export default router